<template>
	<view class="container">
		<view class="coupon_area flex">
			<view class="coupon_card flex" v-for="(item,index) in coupon_arr" :key="index">
				<view class="coupon_info_area flex">
					<view class="coupon_info flex">
						<view class="coupon_condition">消费满{{item.couponDO.min / 100}}使用</view>
						<view class="coupon_time" v-if="item.couponDO.days">有效期{{item.couponDO.days}}天</view>
						<view class="coupon_time" v-else>{{item.couponDO.gmtStart  | dateFormatDate}}至{{item.couponDO.gmtEnd  | dateFormatDate}}有效</view>
					</view>
					<view class="coupon_money">￥{{item.couponDO.discount / 100}}</view>
				</view>
				<view class="coupon_detail flex" @click="exchange_btn(item, index)">
					<viwe class="coupon_detail_text flex">
						<text>{{item.couponDO.title}}</text>
						<text>{{item.integral}}积分</text>
						<text>剩余{{item.couponDO.surplus}}</text>
					</viwe>
					<viwe class="coupon_btn" v-if="item.couponDO.surplus>0">点击兑换<text v-if="item.myCount > 0">已兑换{{item.myCount}}张</text></viwe>
					<viwe class="coupon_btn coupon_btn_over" v-else>已兑完<text v-if="item.myCount > 0">已兑换{{item.myCount}}张</text></viwe>
				</view>
			</view>
		</view>
		<!-- 兑换成功的弹窗 -->
		<view class="cover_page flex" v-if="show_success" @click="show_success = false">
			<view class="success_card flex" @click.stop.prevent="">
				<view class="success_card_title">优惠券兑换成功</view>
				<view class="success_card_text">可以在我的优惠券查看</view>
				<view class="success_coupon flex">
					<view class="success_coupon_info flex">
						<view class="success_coupon_condition">消费满{{select_coupon.condition / 100}}使用</view>
						<view class="success_coupon_time" v-if="select_coupon.time">有效期{{select_coupon.time}}天</view>
						<view class="success_coupon_time" v-else>{{select_coupon.gmtStart  | dateFormatDate}}至{{select_coupon.gmtEnd  | dateFormatDate}}有效</view>
					</view>
					<view class="success_coupon_money">￥{{select_coupon.money / 100}}</view>
					<image src="../../static/integral_img/icon_ok.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show_success: false,
			coupon_arr: [],
			select_coupon: {
				condition: '',
				time: '',
				money: '',
				gmtStart: '',
				gmtEnd: ''
			}
		};
	},
	onHide() {},
	destroyed() {},
	onShow() {},
	onLoad(options) {
		this.get_list_ajax()
	},
	onShareAppMessage() {
		return {
			title: '光合优选-在线商城',
			imageUrl: 'http://shopmalling-asset.oss-cn-hangzhou.aliyuncs.com/share_bg.jpg',
			path: '/pages/index/index'
		}
	},
	methods: {
		get_list_ajax() {
			this.$api
				.request('integralActivity', 'IntegralCouponList', failres => {
					this.$api.msg(failres.errmsg);
				})
				.then(res => {
					this.coupon_arr = res.data;
				});
		},
		//详情页
		navToDetailPage(groupBarginId) {
			uni.navigateTo({
				url: `/pages/make_group/make_group_detail?groupBarginId=${groupBarginId}`
			});
		},
		// 兑换
		exchange_btn(item,index){
			if(item.couponDO.surplus == 0){
				return
			}
			if(item.skuLimit == item.myCount){
				this.$api.msg(`每人最多兑换${item.skuLimit}张`);
				return
			}
			this.$api
				.request('integralActivity', 'exchangeCoupon', {
					IntegralGoodsId: item.integerGoodsId
				}, failres => {
					this.$api.msg(failres.errmsg);
				})
				.then(res => {
					this.select_coupon.condition = this.coupon_arr[index].couponDO.min;
					this.select_coupon.money = this.coupon_arr[index].couponDO.discount;
					this.select_coupon.time = this.coupon_arr[index].couponDO.days;
					this.select_coupon.gmtStart = this.coupon_arr[index].couponDO.gmtStart;
					this.select_coupon.gmtEnd = this.coupon_arr[index].couponDO.gmtEnd;
					this.show_success = true;
					this.get_list_ajax();
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	width: 100%;
	min-height: 100vh;
	background: #ffffff;
	flex-direction: column;
	align-items: center;
}
.flex {
	display: flex;
}

::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
}
.coupon_area {
	width: 100%;
	flex-direction: column;
	align-items: center;
	margin-bottom: 200upx;
	.coupon_card{
		width: 686upx;
		height: 300upx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 4upx 12upx 0px rgba(0, 0, 0, 0.07);
		border-radius: 10upx;
		margin: 25upx 0;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		.coupon_info_area{
			height: 166upx;
			width: 652upx;
			background: url(../../static/integral_img/coupon_card_bg.png) center no-repeat;
			background-size: 100% 100%;
			margin-top: 13upx;
			align-items: center;
			justify-content: center;
			.coupon_info{
				width: 490upx;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.coupon_condition{
					max-width: 75%;
					font-size: 36upx;
					color: #171717;
					font-weight: bold;
					line-height: 57upx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.coupon_time{
					font-size: 20upx;
					color: #737373;
					line-height: 40upx;
				}
			}
			.coupon_money{
				width: 162upx;
				text-align: center;
				font-size: 40upx;
				color: #171717;
			}
		}
		.coupon_detail{
			width: 100%;
			height: 120upx;
			align-items: center;
			.coupon_detail_text{
				flex-direction: column;
				justify-content: center;
				flex-grow: 1;
				text{
					font-size: 20upx;
					line-height: 30upx;
					margin-left: 20upx;
				}
				text:nth-child(1){
					color: #181818;
				}
				text:nth-child(2){
					color: #ff135c;
				}
				text:nth-child(3){
					font-size: 18upx;
					color: #737373;
				}
			}
			.coupon_btn{
				height: 46upx;
				width: 148upx;
				border-radius: 23upx;
				line-height: 46upx;
				text-align: center;
				font-size: 24upx;
				color: #FFFFFF;
				margin-right: 26upx;
				background: #ff135c;
				position: relative;
				text{
					line-height: 40upx;
					font-size: 18upx;
					color: #36342A;
					position: absolute;
					left: 0;
					bottom: -40upx;
					width: 100%;
					text-align: center;
				}
			}
			.coupon_btn_over{
				background: #e5e5e5;
				color: #393939;
			}
		}
	}
}
.cover_page{
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba(0,0,0,0.5);
	align-items: center;
	justify-content: center;
	.success_card{
		height: 360upx;
		width: 548upx;
		border-radius: 10upx;
		background: #FFFFFF;
		flex-direction: column;
		align-items: center;
		.success_card_title{
			font-size:40upx;
			color:rgba(100,100,100,1);
			margin-top: 31upx;
			line-height: 67upx;
		}
		.success_card_text{
			font-size:30upx;
			color:rgba(100,100,100,1);
			margin-bottom: 30upx;
			line-height: 58upx;
		}
		.success_coupon{
			height: 122upx;
			width: 478upx;
			background: url(../../static/integral_img/coupon_card_bg.png) center no-repeat;
			background-size: 100% 100%;
			align-items: center;
			position: relative;
			.success_coupon_info{
				width: 75%;
				height: 100%;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.success_coupon_condition{
					font-size: 26upx;
					font-weight: bold;
					color: rgba(24,24,24,1);
					line-height: 40upx;
				}
				.success_coupon_time{
					font-size: 15upx;
					font-weight: bold;
					color: rgba(115,115,115,1);
					line-height: 29upx;
				}
			}
			.success_coupon_money{
				width: 25%;
				text-align: center;
				font-size:29upx;
				font-weight:bold;
				color:rgba(24,24,24,1);
			}
			image{
				position: absolute;
				top: 0;
				left: 55%;
				height: 81upx;
				width: 96upx;
			}
		}
	}
}
</style>
